@import "./index.skeleton.wxss";

page {
  background-color: var(--bg-color);
  background: var(--linear-gradient);
}

.bg-box {
  position: relative;
}

.bg-box .bg {
  position: absolute;
  width: 100%;
  z-index: -1;
  top: -0%
}

.bg-box .bg .bg-pic {
  width: 100%;
  height: 100%;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  justify-content: space-between;
}

.search-box .box {
  display: flex;
  align-items: center;
  border: 1px solid #585858;
  justify-content: space-between;
  border-radius: 65rpx;
  padding: 0 0 0 15rpx;
  height: 70rpx;
  flex: 1;
}

.search-box .input-box {}

.search-box .input-box input {
  line-height: 45px;
}

.search-box .line {
  background-color: #a893939c;
  width: 1px;
  height: 65%;
}

.search-box .search-btn {
  font-family:'Times New Roman', Times, serif;
  background-color: transparent;
  padding: 0;
  width: 115rpx;
  font-weight: 500;
  margin: 0;
  color: #1D2129;
  font-size: 28rpx;
}

.search-box .msg {
  width: 75rpx;
  display: flex;
  justify-content: flex-end;
}

.search-box .msg .icon {
  width: 48rpx;
  height: 48rpx;
}

/* 通告 */
.notice-box {
  margin-top: 15rpx;
  display: flex;
  padding: 15rpx;
  background-color: rgba(245, 245, 245, 0.651);
  align-items: center;
  border-radius: 15rpx;
}

.notice-box .tag {
  background-color: var(--default-color);
  border-radius: 5px;
  width: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
}

.notice-box .tag text {
  color: #fff;
  font-size: 27rpx;
  font-weight: 600;
  font-style: italic;
}

.notice-box .title {
  padding-left: 15rpx;
}

.notice-box .title text {
  font-size: 28rpx;
  display: block;
  font-weight: 600;
}

.notice-box .title text.desc {
  font-size: 23rpx;
  color: rgb(97, 92, 92);
}



/* 分类区域 */

.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 15rpx;
}

.category .item-box {
  display: flex;
  align-items: center;
  padding-right: 15rpx;
  width: 46.5%;
  margin: 7.5rpx 0 15rpx 0;
  border-radius: 5rpx;
  justify-content: space-between;padding: 15rpx 10rpx;
}

.category .item-box .tit {
  padding: 5rpx 0 0 25rpx;
}

.category .item-box .tit text {
  display: block;
  font-size: 25rpx;
  color: rgb(121, 116, 116);
}

.category .item-box .tit .tit-h2 {
  font-size: 28rpx;
  color: rgb(66, 61, 61);
  font-weight: 600;
  line-height: 28rpx;
}

.category .item-box .thumb {
  width: 85rpx;
  height: 85rpx;
}

/* 商品列表--横向 */
.goods-h-list {
  display: flex;
  padding: 15rpx 0;
  white-space: nowrap;
  flex-direction: row;

  &::after {
    content: ' ';
    display: block;
    width: 0rpx;
    height: 120px;
  }

  .good-item {
    display: flex;
    justify-content: center;
    padding-bottom: 15rpx;
    background-color: #ffffff;
    margin: 0 5rpx;
    border-radius: 0rpx;
    width: 180rpx;

    .box {
      width: 90%;
      padding: 10rpx 15rpx 10rpx 15rpx;

      .thumb {
        height: 110rpx;
        width: 100%;

        .pic {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .title-box {
        display: flex;
        align-items: center;
        padding: 15rpx 0;
        justify-content: center;

        .tit {
          font-weight: 500;
          line-height: 1;
          padding-left: 5rpx;
          font-size: 25rpx;
        }
      }

      .add-to-cart {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5rpx;

        .price {
          font-weight: 600 !important;
          font-size: 25rpx !important;
        }
      }
    }
  }
}

/* 后期提到组件模块中 -开始 */
.tips-box {
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  font-style: italic;
  font-weight: 700;
  padding: 15rpx 0;
}

.bg-view {
  font-size: 40rpx;
  color: #F7E1D5;
}

.tips-box .title {
  position: absolute;
  font-size: 34rpx;
}